<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootswatch: Free themes for Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./5/zephyr/bootstrap.css">
    <link rel="stylesheet" href="./_vendor/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="./_assets/css/custom.min.css">
    <!-- Global Site Tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KGDJBEFF3W"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-KGDJBEFF3W');
    </script>
  </head>
  <body id="home">
    <div class="navbar navbar-expand-lg fixed-top bg-primary navbar-transparent" data-bs-theme="dark">
      <div class="container">
        <a href="./" class="navbar-brand">
          <img class="d-inline-block mx-2" src="_assets/img/logo.svg" alt="" width="30" height="28">
          Bootswatch
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav">
            <li class="nav-item dropdown" data-bs-theme="light">
              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="themes">Themes</a>
              <div class="dropdown-menu" aria-labelledby="themes">
                <a class="dropdown-item" href="./default/">Default</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="./cerulean/">Cerulean</a>
                <a class="dropdown-item" href="./cosmo/">Cosmo</a>
                <a class="dropdown-item" href="./cyborg/">Cyborg</a>
                <a class="dropdown-item" href="./darkly/">Darkly</a>
                <a class="dropdown-item" href="./flatly/">Flatly</a>
                <a class="dropdown-item" href="./journal/">Journal</a>
                <a class="dropdown-item" href="./litera/">Litera</a>
                <a class="dropdown-item" href="./lumen/">Lumen</a>
                <a class="dropdown-item" href="./lux/">Lux</a>
                <a class="dropdown-item" href="./materia/">Materia</a>
                <a class="dropdown-item" href="./minty/">Minty</a>
                <a class="dropdown-item" href="./morph/">Morph</a>
                <a class="dropdown-item" href="./pulse/">Pulse</a>
                <a class="dropdown-item" href="./quartz/">Quartz</a>
                <a class="dropdown-item" href="./sandstone/">Sandstone</a>
                <a class="dropdown-item" href="./simplex/">Simplex</a>
                <a class="dropdown-item" href="./sketchy/">Sketchy</a>
                <a class="dropdown-item" href="./slate/">Slate</a>
                <a class="dropdown-item" href="./solar/">Solar</a>
                <a class="dropdown-item" href="./spacelab/">Spacelab</a>
                <a class="dropdown-item" href="./superhero/">Superhero</a>
                <a class="dropdown-item" href="./united/">United</a>
                <a class="dropdown-item" href="./vapor/">Vapor</a>
                <a class="dropdown-item" href="./yeti/">Yeti</a>
                <a class="dropdown-item" href="./zephyr/">Zephyr</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./help/">Help</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://blog.bootswatch.com/">Blog</a>
            </li>
          </ul>
          <ul class="navbar-nav ms-md-auto">
            <li class="nav-item">
              <a target="_blank" rel="noopener" class="nav-link" href="https://github.com/thomaspark/bootswatch/"><i class="bi bi-github"></i><span class="d-lg-none ms-2">GitHub</span></a>
            </li>
            <li class="nav-item">
              <a target="_blank" rel="noopener" class="nav-link" href="https://twitter.com/bootswatch"><i class="bi bi-twitter"></i><span class="d-lg-none ms-2">Twitter</span></a>
            </li>
            <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
              <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
              <hr class="d-lg-none my-2 text-white-50">
            </li>
            <li class="nav-item dropdown" data-bs-theme="light">
              <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="version-menu" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme">
                <span class="d-lg-none me-2">Bootstrap </span>
                <span>v5.3</span>
              </a>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a href="https://bootswatch.com/" class="dropdown-item d-flex align-items-center justify-content-between" aria-current="true">
                    <span class="ms-2">v5.3.x</span><i class="bi bi-check"></i>
                  </a>
                </li>
                <li>
                  <a href="https://bootswatch.com/4/" class="dropdown-item d-flex align-items-center justify-content-between">
                    <span class="ms-2">v4.6.2</span>
                  </a>
                </li>
                <li>
                  <a href="https://bootswatch.com/3/" class="dropdown-item d-flex align-items-center justify-content-between">
                    <span class="ms-2">v3.4.1</span>
                  </a>
                </li>
                <li>
                  <a href="https://bootswatch.com/2/" class="dropdown-item d-flex align-items-center justify-content-between">
                    <span class="ms-2">v2.3.2</span>
                  </a>
                </li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li>
                  <a href="https://github.com/thomaspark/bootswatch/tags" class="dropdown-item d-flex align-items-center justify-content-between">
                    <span class="ms-2">All versions</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
              <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
              <hr class="d-lg-none my-2 text-white-50">
            </li>
            <li class="nav-item dropdown" data-bs-theme="light">
              <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="theme-menu" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme">
                <i class="bi bi-circle-half"></i>
                <span class="d-lg-none ms-2">Toggle theme</span>
              </a>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                    <i class="bi bi-sun-fill"></i><span class="ms-2">Light</span>
                  </button>
                </li>
                <li>
                  <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="true">
                    <i class="bi bi-moon-stars-fill"></i><span class="ms-2">Dark</span>
                  </button>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="splash">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1>Free themes for Bootstrap</h1>
            <div id="social">
              <span>
                <iframe id="gh-fork" src="https://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=fork&count=true" width="110" height="30"></iframe>
                <iframe id="gh-star" src="https://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=star&count=true" width="110" height="30"></iframe>
              </span>
            </div>
            <div class="row">
              <div class="col-md-6 mx-auto">
                <div class="sponsor">
                  <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIE23N&placement=bootswatchcom" id="_carbonads_js"></script>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="section-tout">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="bi bi-file-earmark"></i></div>
            <h4>Easy to Install</h4>
            <p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="bi bi-gear-wide"></i></div>
            <h4>Customizable</h4>
            <p>Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility.</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="bi bi-wrench"></i></div>
            <h4>Tuned for 5.3.3</h4>
            <p>Themes are built for the latest version of Bootstrap. <a href="4/">Version 4</a>, <a href="3/">version 3</a>, <a href="2/">version 2</a>, and <a target="_blank" rel="noopener" href="https://github.com/thomaspark/bootswatch/tags">other releases</a> are also available to download.</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="bi bi-github"></i></div>
            <h4>Open Source</h4>
            <p>Bootstrap themes are released under the MIT License and maintained by the community on <a target="_blank" rel="noopener" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="bi bi-plug-fill"></i></div>
            <h4>Get Plugged In</h4>
            <p>An <a href="./help/#api">API</a> is available for integrating with your platform. In use by <a href="https://nodebb.org/" target="_blank" rel="noopener">NodeBB</a> and many more.</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="icon"><i class="bi bi-send"></i></div>
            <h4>Stay Updated</h4>
            <p>Be notified about updates by following via <a href="https://blog.bootswatch.com/rss/">RSS feed</a>, <a href="https://twitter.com/bootswatch">Twitter</a>, or <a href="https://blog.bootswatch.com/">blog</a>.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="section-preview">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="cerulean/">
                  <img src="cerulean/thumbnail.png" alt="Cerulean" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Cerulean</h3>
                <p>A calm blue sky</p>
                <div class="btn-group"><a class="btn btn-primary" href="cerulean/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/cerulean/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/cerulean/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/cerulean/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/cerulean/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/cerulean/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/cerulean/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/cerulean/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'cerulean', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="cosmo/">
                  <img src="cosmo/thumbnail.png" alt="Cosmo" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Cosmo</h3>
                <p>An ode to Metro</p>
                <div class="btn-group"><a class="btn btn-primary" href="cosmo/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/cosmo/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/cosmo/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/cosmo/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/cosmo/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/cosmo/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/cosmo/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/cosmo/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'cosmo', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="cyborg/">
                  <img src="cyborg/thumbnail.png" alt="Cyborg" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Cyborg</h3>
                <p>Jet black and electric blue</p>
                <div class="btn-group"><a class="btn btn-primary" href="cyborg/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/cyborg/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/cyborg/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/cyborg/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/cyborg/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/cyborg/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/cyborg/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/cyborg/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'cyborg', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="darkly/">
                  <img src="darkly/thumbnail.png" alt="Darkly" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Darkly</h3>
                <p>Flatly in night mode</p>
                <div class="btn-group"><a class="btn btn-primary" href="darkly/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/darkly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/darkly/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/darkly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/darkly/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/darkly/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/darkly/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/darkly/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'darkly', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="flatly/">
                  <img src="flatly/thumbnail.png" alt="Flatly" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Flatly</h3>
                <p>Flat and modern</p>
                <div class="btn-group"><a class="btn btn-primary" href="flatly/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/flatly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/flatly/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/flatly/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/flatly/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/flatly/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'flatly', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="journal/">
                  <img src="journal/thumbnail.png" alt="Journal" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Journal</h3>
                <p>Crisp like a new sheet of paper</p>
                <div class="btn-group"><a class="btn btn-primary" href="journal/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/journal/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/journal/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/journal/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/journal/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/journal/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/journal/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/journal/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'journal', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="litera/">
                  <img src="litera/thumbnail.png" alt="Litera" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Litera</h3>
                <p>The medium is the message</p>
                <div class="btn-group"><a class="btn btn-primary" href="litera/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/litera/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/litera/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/litera/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/litera/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/litera/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/litera/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/litera/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'litera', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="lumen/">
                  <img src="lumen/thumbnail.png" alt="Lumen" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Lumen</h3>
                <p>Light and shadow</p>
                <div class="btn-group"><a class="btn btn-primary" href="lumen/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/lumen/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/lumen/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/lumen/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/lumen/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/lumen/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/lumen/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/lumen/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'lumen', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="lux/">
                  <img src="lux/thumbnail.png" alt="Lux" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Lux</h3>
                <p>A touch of class</p>
                <div class="btn-group"><a class="btn btn-primary" href="lux/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/lux/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/lux/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/lux/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/lux/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/lux/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/lux/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/lux/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'lux', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="materia/">
                  <img src="materia/thumbnail.png" alt="Materia" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Materia</h3>
                <p>Material is the metaphor</p>
                <div class="btn-group"><a class="btn btn-primary" href="materia/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/materia/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/materia/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/materia/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/materia/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/materia/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/materia/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/materia/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'materia', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="minty/">
                  <img src="minty/thumbnail.png" alt="Minty" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Minty</h3>
                <p>A fresh feel</p>
                <div class="btn-group"><a class="btn btn-primary" href="minty/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/minty/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/minty/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/minty/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/minty/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/minty/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/minty/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/minty/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'minty', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="morph/">
                  <img src="morph/thumbnail.png" alt="Morph" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Morph</h3>
                <p>A neumorphic layer</p>
                <div class="btn-group"><a class="btn btn-primary" href="morph/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/morph/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/morph/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/morph/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/morph/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/morph/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/morph/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/morph/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'morph', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="pulse/">
                  <img src="pulse/thumbnail.png" alt="Pulse" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Pulse</h3>
                <p>A trace of purple</p>
                <div class="btn-group"><a class="btn btn-primary" href="pulse/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/pulse/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/pulse/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/pulse/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/pulse/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/pulse/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/pulse/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/pulse/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'pulse', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="quartz/">
                  <img src="quartz/thumbnail.png" alt="Quartz" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Quartz</h3>
                <p>A glassmorphic layer</p>
                <div class="btn-group"><a class="btn btn-primary" href="quartz/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/quartz/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/quartz/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/quartz/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/quartz/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/quartz/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/quartz/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/quartz/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'quartz', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="sandstone/">
                  <img src="sandstone/thumbnail.png" alt="Sandstone" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Sandstone</h3>
                <p>A touch of warmth</p>
                <div class="btn-group"><a class="btn btn-primary" href="sandstone/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/sandstone/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/sandstone/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/sandstone/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/sandstone/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/sandstone/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/sandstone/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/sandstone/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'sandstone', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="simplex/">
                  <img src="simplex/thumbnail.png" alt="Simplex" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Simplex</h3>
                <p>Mini and minimalist</p>
                <div class="btn-group"><a class="btn btn-primary" href="simplex/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/simplex/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/simplex/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/simplex/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/simplex/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/simplex/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/simplex/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/simplex/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'simplex', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="sketchy/">
                  <img src="sketchy/thumbnail.png" alt="Sketchy" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Sketchy</h3>
                <p>A hand-drawn look for mockups and mirth</p>
                <div class="btn-group"><a class="btn btn-primary" href="sketchy/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/sketchy/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/sketchy/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/sketchy/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/sketchy/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/sketchy/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/sketchy/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/sketchy/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'sketchy', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="slate/">
                  <img src="slate/thumbnail.png" alt="Slate" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Slate</h3>
                <p>Shades of gunmetal gray</p>
                <div class="btn-group"><a class="btn btn-primary" href="slate/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/slate/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/slate/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/slate/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/slate/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/slate/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/slate/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/slate/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'slate', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="solar/">
                  <img src="solar/thumbnail.png" alt="Solar" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Solar</h3>
                <p>A spin on Solarized</p>
                <div class="btn-group"><a class="btn btn-primary" href="solar/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/solar/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/solar/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/solar/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/solar/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/solar/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/solar/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/solar/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'solar', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="spacelab/">
                  <img src="spacelab/thumbnail.png" alt="Spacelab" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Spacelab</h3>
                <p>Silvery and sleek</p>
                <div class="btn-group"><a class="btn btn-primary" href="spacelab/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/spacelab/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/spacelab/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/spacelab/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/spacelab/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/spacelab/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/spacelab/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/spacelab/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'spacelab', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="superhero/">
                  <img src="superhero/thumbnail.png" alt="Superhero" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Superhero</h3>
                <p>The brave and the blue</p>
                <div class="btn-group"><a class="btn btn-primary" href="superhero/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/superhero/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/superhero/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/superhero/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/superhero/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/superhero/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/superhero/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/superhero/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'superhero', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="united/">
                  <img src="united/thumbnail.png" alt="United" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>United</h3>
                <p>Ubuntu orange and unique font</p>
                <div class="btn-group"><a class="btn btn-primary" href="united/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/united/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/united/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/united/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/united/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/united/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/united/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/united/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'united', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="vapor/">
                  <img src="vapor/thumbnail.png" alt="Vapor" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Vapor</h3>
                <p>A cyberpunk aesthetic</p>
                <div class="btn-group"><a class="btn btn-primary" href="vapor/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/vapor/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/vapor/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/vapor/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/vapor/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/vapor/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/vapor/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/vapor/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'vapor', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="yeti/">
                  <img src="yeti/thumbnail.png" alt="Yeti" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Yeti</h3>
                <p>A friendly foundation</p>
                <div class="btn-group"><a class="btn btn-primary" href="yeti/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/yeti/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/yeti/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/yeti/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/yeti/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/yeti/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/yeti/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/yeti/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'yeti', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="zephyr/">
                  <img src="zephyr/thumbnail.png" alt="Zephyr" width="350" height="210" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Zephyr</h3>
                <p>Breezy and beautiful</p>
                <div class="btn-group"><a class="btn btn-primary" href="zephyr/">Preview</a></div>
                <div class="btn-group">
                  <a class="btn btn-primary" href="5/zephyr/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.min.css'});" download>Download</a>
                  <a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="5/zephyr/bootstrap.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.css'});" download>bootstrap.css</a>
                    <a class="dropdown-item" href="5/zephyr/bootstrap.min.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.min.css'});" download>bootstrap.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/zephyr/bootstrap.rtl.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.rtl.css'});" download>bootstrap.rtl.css</a>
                    <a class="dropdown-item" href="5/zephyr/bootstrap.rtl.min.css" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': 'bootstrap.rtl.min.css'});" download>bootstrap.rtl.min.css</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="5/zephyr/_variables.scss" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': '_variables.scss'});" download>_variables.scss</a>
                    <a class="dropdown-item" href="5/zephyr/_bootswatch.scss" onclick="gtag('event', 'download', {'event_category': 'zephyr', 'event_label': '_bootswatch.scss'});" download>_bootswatch.scss</a>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1>Want more?</h1>
            <p class="lead">Check out these premium templates from <a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299" title="Marketplace for premium Bootstrap templates" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': '3rdwave'});">3rd Wave Media</a>.</p>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/iIBsVb" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'launch'});">
                  <img src="_assets/img/refs/themes.3rdwavemedia.com_launch-bootstrap-template-for-saas-businesses.png" alt="Launch" width="350" height="219" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Launch</h3>
                <p>A template for SaaS businesses</p>
                <div>
                  <a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/iIBsVb" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'launch'});">View Details</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/hexdK" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'instance'});">
                  <img src="_assets/img/refs/themes.3rdwavemedia.com_instance-bootstrap-portfolio-template-for-developers.png" alt="Instance" width="350" height="219" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Instance</h3>
                <p>A personal portfolio template for developers</p>
                <div>
                  <a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/hexdK" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'instance'});">View Details</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/BBjAG" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'startupkit'});">
                  <img src="_assets/img/refs/themes.3rdwavemedia.com_startupkit-startup-bootstrap-template.png" alt="Startup Kit" width="350" height="219" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Startup Kit</h3>
                <p>A Bootstrap template for SaaS startups</p>
                <div>
                  <a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/BBjAG" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'startupkit'});">View Details</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/XPCxW" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'coderpro'});">
                  <img src="_assets/img/refs/themes.3rdwavemedia.com_coderpro_bs4_-700.png" alt="CoderPro" width="350" height="197" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>CoderPro</h3>
                <p>Startup template for software projects</p>
                <div>
                  <a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/XPCxW" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'coderpro'});">View Details</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/nJtGd" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'novapro'});">
                  <img src="_assets/img/refs/themes.3rdwavemedia.com_nova-pro_bs4_-700.png" alt="Nova Pro" width="350" height="197" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Nova Pro</h3>
                <p>The best way to promote your mobile app</p>
                <div>
                  <a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/nJtGd" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'novapro'});">View Details</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/fYvEc" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'devcard'});">
                  <img src="_assets/img/refs/themes.3rdwavemedia.com_devcard_bs4_2.0_-700.png" alt="Dev Card" width="350" height="197" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Dev Card</h3>
                <p>A portfolio template for developers</p>
                <div>
                  <a class="btn btn-primary" rel="noopener" target="_blank" href="https://gumroad.com/a/392541299/fYvEc" onclick="gtag('event', 'outbound', {'event_category': '3rdwave', 'event_label': 'devcard'});">View Details</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-12">
            <h1>Still looking?</h1>
            <p class="lead">Learn to code your own themes with these books from <a rel="noopener nofollow" target="_blank" href="https://www.amazon.com/?tag=bootswatch-20">Amazon</a>. As an associate, we earn a cut of each sale.</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'htmlandcss'});" href="https://www.amazon.com/gp/product/1118907442/ref=as_li_tf_tl?ie=UTF8&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1118907442" rel="noopener nofollow" target="_blank">
                  <img src="_assets/img/refs/htmlandcss.png" alt="HTML and CSS: Design and Build Websites, by Jon Duckett" width="350" height="236" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>HTML &amp; CSS</h3>
                <p>Jon Duckett</p>
                <div>
                  <div class="btn-group">
                    <a class="btn btn-primary" onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'htmlandcss'});" href="https://www.amazon.com/gp/product/1118907442/ref=as_li_tf_tl?ie=UTF8&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1118907442" rel="noopener nofollow" target="_blank">Buy Now</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'eloquentjavascript'});" href="https://www.amazon.com/gp/product/1593279507/ref=as_li_tf_tl?ie=UTF8&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1593279507" rel="noopener nofollow" target="_blank">
                  <img src="_assets/img/refs/eloquentjavascript.png" alt="Eloquent JavaScript, by Marijn Haverbeke" width="350" height="236" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Eloquent JavaScript</h3>
                <p>Marijn Haverbeke</p>
                <div>
                  <div class="btn-group">
                    <a class="btn btn-primary" onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'eloquentjavascript'});" href="https://www.amazon.com/gp/product/1593279507/ref=as_li_tf_tl?ie=UTF8&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1593279507" rel="noopener nofollow" target="_blank">Buy Now</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'csssecrets'});" href="https://www.amazon.com/gp/product/1449372635/ref=as_li_tf_tl?ie=UTF8&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1449372635" rel="noopener nofollow" target="_blank">
                  <img src="_assets/img/refs/csssecrets.png" alt="CSS Secrets: Better Solutions to Everyday Web Design Problems by Lea Verou" width="350" height="236" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>CSS Secrets</h3>
                <p>Lea Verou</p>
                <div>
                  <div class="btn-group">
                    <a class="btn btn-primary" onclick="gtag('event', 'outbound', {'event_category': 'amazon', 'event_label': 'csssecrets'});" href="https://www.amazon.com/gp/product/1449372635/ref=as_li_tf_tl?ie=UTF8&amp;tag=bootswatch-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1449372635" rel="noopener nofollow" target="_blank">Buy Now</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-12">
            <h1>Good luck have fun!</h1>
            <p class="lead">Or learn to code by playing games with <a rel="noopener" target="_blank" href="https://codepip.com">Codepip</a>.</p>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="https://codepip.com/games/flexbox-froggy/" rel="noopener" target="_blank">
                  <img src="_assets/img/refs/flexbox-froggy-pro.png" alt="Flexbox Froggy: A game for learning CSS Flexbox" width="350" height="233" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Flexbox Froggy</h3>
                <p>A game for learning CSS Flexbox</p>
                <div>
                  <div class="btn-group"><a class="btn btn-primary" href="https://codepip.com/games/flexbox-froggy/" rel="noopener" target="_blank">Play Now</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="https://codepip.com/games/grid-garden/" rel="noopener" target="_blank">
                  <img src="_assets/img/refs/grid-garden.png" alt="Grid Garden: A game for learning CSS Grid" width="350" height="233" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Grid Garden</h3>
                <p>A game for learning CSS Grid</p>
                <div>
                  <div class="btn-group"><a class="btn btn-primary" href="https://codepip.com/games/grid-garden/" rel="noopener" target="_blank">Play Now</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="card preview">
              <div class="image">
                <a href="https://codepip.com/games/code-crunchers/" rel="noopener" target="_blank">
                  <img src="_assets/img/refs/code-crunchers.png" alt="Code Crunchers: A game for learning JavaScript Math" width="350" height="233" loading="lazy">
                </a>
              </div>
              <div class="options">
                <h3>Code Crunchers</h3>
                <p>A game for learning JavaScript Math</p>
                <div>
                  <div class="btn-group"><a class="btn btn-primary" href="https://codepip.com/games/code-crunchers/" rel="noopener" target="_blank">Play Now</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <footer id="footer">
        <div class="row">
          <div class="col-lg-12">
            <ul class="list-unstyled">
              <li class="float-lg-right"><a href="#top">Back to top</a></li>
              <li><a href="https://blog.bootswatch.com/">Blog</a></li>
              <li><a href="https://blog.bootswatch.com/rss/">RSS</a></li>
              <li><a href="https://twitter.com/bootswatch">Twitter</a></li>
              <li><a href="https://github.com/thomaspark/bootswatch">GitHub</a></li>
              <li><a href="./help/#api">API</a></li>
              <li><a href="./help/#donate">Donate</a></li>
            </ul>
            <p>Made by <a href="https://thomaspark.co/">Thomas Park</a>.</p>
            <p>Code released under the <a href="https://github.com/thomaspark/bootswatch/blob/master/LICENSE">MIT License</a>.</p>
            <p>Based on <a href="https://getbootstrap.com/" rel="nofollow">Bootstrap</a>. Icons from <a href="https://icons.getbootstrap.com/" rel="nofollow">Bootstrap Icons</a>. Web fonts from <a href="https://fonts.google.com/" rel="nofollow">Google</a>.</p>
          </div>
        </div>
      </footer>
    </div>

    <script src="./_vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./_assets/js/custom.js"></script>
  </body>
</html>
